/*
 * @Description: 信用卡cvn2说明弹框
 * @Author: tao.xie
 * @Date: 2019-03-22 18:43:13
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-03-28 09:57:47
 */
<template>
  <animated-dialog ref="dialog">
    <div class="content-wrapper flex-v flex-vc">
      <img :src="icon" />
      <span>{{msg}}</span>
      <button
        class="baseBgColorWithActive"
        @click="hide"
      >我知道了</button>
    </div>
  </animated-dialog>
</template>

<script>
import AnimatedDialog from '@/components/animateddialog/AnimatedDialog'
export default {
  components: {
    'animated-dialog': AnimatedDialog
  },
  methods: {
    show() {
      this.$refs.dialog.show()
    },
    hide() {
      this.$refs.dialog.hide()
    }
  },
  data() {
    return {
      icon: require('../assets/cvn2.png'),
      msg: 'CVN2码指您的信用卡背面签名栏内的最后3位数字，即图示中白框内位置的最后三位数字。'
    }
  }
}
</script>

<style scoped>
/*弹框包裹层*/
.content-wrapper {
  width: 560px;
  height: 470px;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}
/* 图片 */
.content-wrapper > img:first-of-type {
  width: 440px;
  height: 268px;
  margin-top: -68px;
}
/* 中间的文字 */
.content-wrapper > span:first-of-type {
  width: 495px;
  height: 80px;
  font-size: 14px; /*no*/
  color: #333;
  line-height: 20px; /*no*/
}
/* 按钮 */
.content-wrapper > button:first-of-type {
  width: 300px;
  height: 80px;
  border-radius: 8px;
  color: #fff;
  border: none;
  margin-top: 52px;
}
</style>
